
(function() {

	Berta.Panel.addPaneDefinition('grid', new Class((function(){

		return {
			extend: Berta.Pane,

			defaults: {
				type: 'grid'
			},

			constructor: function(options) {
				Berta.Pane.call(this, options);
				this.setTitle('Grid & guides');
			},

			//   .______    __    __  .______    __       __    ______    ////////////////////////////////////////////////////////////
			//   |   _  \  |  |  |  | |   _  \  |  |     |  |  /      |   ////////////////////////////////////////////////////////////
			//   |  |_)  | |  |  |  | |  |_)  | |  |     |  | |  ,----'   ////////////////////////////////////////////////////////////
			//   |   ___/  |  |  |  | |   _  <  |  |     |  | |  |        ////////////////////////////////////////////////////////////
			//   |  |      |  `--'  | |  |_)  | |  `----.|  | |  `----.   ////////////////////////////////////////////////////////////
			//   | _|       \______/  |______/  |_______||__|  \______|   ////////////////////////////////////////////////////////////


			afterOpen: /*override */ function() {
				this._(render)();
				this.fireResize();
			},

			beforeClose: /* override */ function() {

			}


		};


		//   .______   .______     __  ____    ____  ___   .___________. _______    //////////////////////////////////////////////////
		//   |   _  \  |   _  \   |  | \   \  /   / /   \  |           ||   ____|   //////////////////////////////////////////////////
		//   |  |_)  | |  |_)  |  |  |  \   \/   / /  ^  \ `---|  |----`|  |__      //////////////////////////////////////////////////
		//   |   ___/  |      /   |  |   \      / /  /_\  \    |  |     |   __|     //////////////////////////////////////////////////
		//   |  |      |  |\  \--.|  |    \    / /  _____  \   |  |     |  |____    //////////////////////////////////////////////////
		//   | _|      | _| `.___||__|     \__/ /__/     \__\  |__|     |_______|   //////////////////////////////////////////////////

		function render() {
			if (!this.rendered) {

				var html = $('<div><h4>GRID</h4></div>');
				html.append(
					$('<p></p>').append(
						$('<button name="grid_toggle">Turn on</button>').toggle(function() {
							$(this).html('Turn off');
							Berta.Grid.instance().on();
						}, function() {
							$(this).html('Turn on');
							Berta.Grid.instance().off();
						})
					)
				).append(
					$('<p></p>').append(
									$('<input type="text" name="grid_spacing_v" value="20" />').change(function() {
										Berta.Grid.instance().setSpacing($(this).val(), null);
									})
								)
								.append(
									$('<input type="text" name="grid_spacing_h" value="20" />').change(function() {
										Berta.Grid.instance().setSpacing(null, $(this).val());
									})
								)
								/*.append(
									$('<button name="grid_toggle">Update size</button>').click(function() {
										var v = $(this).siblings('[name="grid_spacing_v"]').val(),
											h = $(this).siblings('[name="grid_spacing_h"]').val();
										Berta.Grid.instance().setSpacing(v, h);
									})
								)*/
				)

				this.fill(html);
				this.rendered = true;
			}
		}




	})()));


})();
